import classNames from 'classnames'
import './index.scss'
import * as dayjs from 'dayjs'
import { useState, useMemo } from 'react'
import {billTypeToName} from '@/contants/index'
import Icon from '@/components/Icon'
const DailyBill = (props) => {
    // console.log(props)
  const { bills, day, type} = props

  const dayCost = useMemo(()=>{
    const income = bills && bills.reduce((pre, cur)=>{
      if(cur.type === "income"){
        return pre + Number(cur.money)
      }
      return pre
    }, 0)
    const pay = bills && bills.reduce((pre, cur)=>{
      if(cur.type === "pay"){
        return pre + Number(cur.money)
      }
      return pre
    }, 0)
    const total = income + pay
    return{
      income,
      pay,
      total
    }
  }, [bills])

  const [expand, setExpand] = useState(false)
  return (
    <div className={classNames('dailyBill', expand && 'expand')}>
      <div className="header">
        <div className="dateIcon" onClick={()=>setExpand(!expand)}>
          <span className="date">{type === "month" ?  dayjs(day).format("MM月") : dayjs(day).format("MM月DD日")}</span>
          <span className={classNames('arrow', !expand && 'expand')}></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{Math.abs(dayCost.pay)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{dayCost.income}</span>
          </div>
          <div className="balance">
            <span className="money">{dayCost.total}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
      {/* 单日列表 */}
      <div className="billList">
        {bills.map(item => {
          return (
            <div className="bill" key={item.id}>
              <div className="detail">
                <div className="billType">
                  <Icon type={item.useFor || 'other'}/>

                  {billTypeToName[item.useFor] || "其他"}
                </div>
              </div>
              <div className={classNames('money', item.type)}>
                {item.money.toFixed(2)}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
export default DailyBill